<template>
  <div id="app">
    <AppHeader 
      :title="currentMenu.name"
      @go-back="handleGoBack"
      @toggle-menu="drawerVisible = true"
    />
    
    <div class="content">
      <!-- 个人信息管理页面 -->
      <PersonManager v-if="currentSubMenuId === 101" />
      
      <!-- 通知偏好设置页面 -->
      <NotificationSettings v-else-if="currentSubMenuId === 102" />
      
      <!-- 历史记录查看页面 -->
      <HistoricalRecords v-else-if="currentSubMenuId === 103" />
      
      <!-- 系统主题选择页面 -->
      <SystemTheme v-else-if="currentSubMenuId === 104" />
      
      <!-- 突发事件查询模块 -->
      <template v-else-if="currentSubMenuId === 201">
        <!-- 事件列表页 -->
        <EventList 
          v-if="!showEventDetail"
          @view-detail="handleViewEventDetail"
        />
        <!-- 查询结果分享详情页 -->
        <QuerySharing 
          v-else
          :initial-event="selectedEvent"
          @back-to-list="handleBackToList"
        />
      </template>
      
      <!-- 现场调查管理模块 -->
      <!-- 调查报告保存与分享 -->
      <ReportSaveShare v-else-if="currentSubMenuId === 301" />
      
      <!-- 调查报告导出 -->
      <ReportExport v-else-if="currentSubMenuId === 302" />
      
      <!-- 调查内容查询与检索 -->
      <ReportQuery v-else-if="currentSubMenuId === 303" />
      
      <!-- 系统消息管理模块 -->
      <!-- 系统消息发送 -->
      <SystemMessage v-else-if="currentSubMenuId === 401" />
      
      <!-- 个人消息管理模块 -->
      <!-- 消息回复与反馈 -->
      <MessageReplyFeedback v-else-if="currentSubMenuId === 501" />
      
      <!-- 消息通知设置 -->
      <MessageNotificationSettings v-else-if="currentSubMenuId === 502" />
      
      <!-- 应急知识手册模块 -->
      <!-- 文档下载查看 -->
      <EmergencyManual v-else-if="currentSubMenuId === 601" />
      
      <!-- 值班信息模块 -->
      <!-- 值班信息导出 -->
      <DutyExport v-else-if="currentSubMenuId === 701" />
      
      <!-- 事件续报模块 -->
      <!-- 事件续报录入 -->
      <EventInput v-else-if="currentSubMenuId === 801" />
      
      <!-- 事件描述及措施记录 -->
      <EventDescription v-else-if="currentSubMenuId === 802" />
      
      <!-- 处理情况反馈 -->
      <HandlingFeedback v-else-if="currentSubMenuId === 803" />
      
      <!-- 报告人信息记录 -->
      <ReporterInfo v-else-if="currentSubMenuId === 804" />
      
      <!-- 续报信息校验 -->
      <InfoValidation v-else-if="currentSubMenuId === 805" />
      
      <!-- 续报信息存储 -->
      <InfoStorage v-else-if="currentSubMenuId === 806" />
      
      <!-- 续报信息查询与导出 -->
      <InfoQueryExport v-else-if="currentSubMenuId === 807" />
      
      <!-- 事件状态跟踪 -->
      <EventStatusTracking v-else-if="currentSubMenuId === 808" />
      
      <!-- 其他数据页面 -->
      <DataPage
        v-else
        :data-list="dataList"
        @analysis="handleAnalysis"
        @manage="handleManage"
      />
    </div>
    
    <MenuDrawer 
      :visible.sync="drawerVisible"
      :menu-list="menuList"
      :current-sub-menu-id="currentSubMenuId"
      @select-menu="selectMenu"
    />
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue';
import DataPage from './views/DataPage.vue';
import PersonManager from './views/base-data/person-manager/index.vue';
import NotificationSettings from './views/base-data/notification-settings/index.vue';
import HistoricalRecords from './views/base-data/historical-records/index.vue';
import SystemTheme from './views/base-data/system-theme/index.vue';
import EventList from './views/query-sharing/event-list.vue';
import QuerySharing from './views/query-sharing/index.vue';
import ReportSaveShare from './views/investigation-management/report-save-share.vue';
import ReportExport from './views/investigation-management/report-export.vue';
import ReportQuery from './views/investigation-management/report-query.vue';
import SystemMessage from './views/system-message/index.vue';
import MessageReplyFeedback from './views/personal-management/message-reply-feedback.vue';
import MessageNotificationSettings from './views/personal-management/message-notification-settings.vue';
import EmergencyManual from './views/emergency-manual/index.vue';
import DutyExport from './views/duty-information/index.vue';
import EventInput from './views/follow-report-event/event-input.vue';
import EventDescription from './views/follow-report-event/event-description.vue';
import HandlingFeedback from './views/follow-report-event/handling-feedback.vue';
import ReporterInfo from './views/follow-report-event/reporter-info.vue';
import InfoValidation from './views/follow-report-event/info-validation.vue';
import InfoStorage from './views/follow-report-event/info-storage.vue';
import InfoQueryExport from './views/follow-report-event/info-query-export.vue';
import EventStatusTracking from './views/follow-report-event/event-status-tracking.vue';
import MenuDrawer from './components/MenuDrawer.vue';
import { menuData, getMenuPath } from './data/menuData';
import { getDataByMenuIndex } from './data/mockData';

export default {
  name: 'App',
  
  components: {
    AppHeader,
    DataPage,
    PersonManager,
    NotificationSettings,
    HistoricalRecords,
    SystemTheme,
    EventList,
    QuerySharing,
    ReportSaveShare,
    ReportExport,
    ReportQuery,
    SystemMessage,
    MessageReplyFeedback,
    MessageNotificationSettings,
    EmergencyManual,
    DutyExport,
    EventInput,
    EventDescription,
    HandlingFeedback,
    ReporterInfo,
    InfoValidation,
    InfoStorage,
    InfoQueryExport,
    EventStatusTracking,
    MenuDrawer
  },
  
  data() {
    return {
      drawerVisible: false,
      currentSubMenuId: 101, // 默认选中第一个子菜单
      menuList: menuData,
      dataList: getDataByMenuIndex(0),
      menuHistory: [], // 菜单访问历史栈
      
      // 查询分享页面状态
      showEventDetail: false, // 是否显示事件详情页
      selectedEvent: null // 当前选中的事件
    };
  },
  
  computed: {
    currentMenu() {
      const menuPath = getMenuPath(this.currentSubMenuId);
      if (menuPath) {
        return {
          name: menuPath.subMenu.name,
          parentName: menuPath.parentMenu.name
        };
      }
      return { name: '应急值守移动端', parentName: '' };
    }
  },
  
  methods: {
    handleGoBack() {
      // 如果当前在查询分享详情页，返回列表页
      if (this.currentSubMenuId === 201 && this.showEventDetail) {
        this.handleBackToList();
        return;
      }
      
      // 如果有历史记录，返回上一个菜单
      if (this.menuHistory.length > 0) {
        const previousMenuId = this.menuHistory.pop();
        this.currentSubMenuId = previousMenuId;
        
        // 重置查询分享页面状态
        this.showEventDetail = false;
        this.selectedEvent = null;
        
        // 获取菜单路径信息
        const menuPath = getMenuPath(previousMenuId);
        if (menuPath) {
          // 根据父菜单ID加载对应数据
          const parentIndex = this.menuList.findIndex(m => m.id === menuPath.parentMenu.id);
          this.dataList = getDataByMenuIndex(parentIndex >= 0 ? parentIndex : 0);
        }
      } else {
        // 没有历史记录时，提示用户或返回默认首页
        this.$message({
          message: '已经是第一页了',
          type: 'info'
        });
      }
    },
    
    selectMenu(subMenu) {
      // 如果不是当前页面，则将当前页面加入历史
      if (this.currentSubMenuId !== subMenu.id) {
        this.menuHistory.push(this.currentSubMenuId);
      }
      
      this.currentSubMenuId = subMenu.id;
      this.drawerVisible = false;
      
      // 重置查询分享页面状态（切换菜单时回到列表页）
      this.showEventDetail = false;
      this.selectedEvent = null;
      
      const menuPath = getMenuPath(subMenu.id);
      
      // 根据父菜单ID加载对应数据
      const parentIndex = this.menuList.findIndex(m => m.id === subMenu.parentId);
      this.dataList = getDataByMenuIndex(parentIndex >= 0 ? parentIndex : 0);
    },
    
    handleAnalysis(item) {
      this.$message({
        message: `查看统计分析：${item.name}`,
        type: 'info'
      });
    },
    
    handleManage(item) {
      this.$message({
        message: `进入督导管理：${item.name}`,
        type: 'success'
      });
    },
    
    // 查看事件详情（从列表页跳转到详情页）
    handleViewEventDetail(event) {
      this.selectedEvent = event;
      this.showEventDetail = true;
    },
    
    // 返回事件列表（从详情页返回列表页）
    handleBackToList() {
      this.showEventDetail = false;
      this.selectedEvent = null;
    }
  },
  
  mounted() {
    console.log('应急值守移动端APP已启动');
  }
};
</script>

<style scoped>
#app {
  min-height: 100vh;
  background: var(--theme-bg-secondary);
  color: var(--theme-text);
  display: flex;
  flex-direction: column;
  transition: background var(--animation-duration), color var(--animation-duration);
}

.content {
  padding-top: 50px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  background: var(--theme-bg-secondary);
  transition: background var(--animation-duration);
}
</style>

